@import "common.less";

@media screen and (min-width: 750px) {
  html {
    font-size: 75px !important;
  }
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  min-width: 320px;
  max-width: 750px;
  margin: 0 auto;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f4f4f4;
  // height: 40rem;
}

header {
  position: relative;
  height: 1.72rem;
  line-height: 1.72rem;
  text-align: center;
  font-size: 0.426667rem;
  border-bottom: 1px solid #eaeaea;
  background-color: #ffffff;
  a {
    position: absolute;
    top: 50%;
    left: 0.4rem;
    // transform: ;
    // content: "";
    width: 0.266667rem;
    height: 0.266667rem;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    transform: translateY(-50%) rotate(-45deg);
  }
}

// 参考薪资部分
.accord {
  padding: 0 0 0.6rem 0.346667rem;
  background-color: #fff;
  .common-bd {
    text-align: center;
    p {
      margin-top: 0.573333rem;
      font-size: 0.266667rem;
      color: #333333;
    }

    h4 {
      margin-top: 0.533333rem;
      color: #ff6161;
      font-size: 0.506667rem;
      font-size: 700;
      letter-spacing: 0.106667rem;
      span {
        font-size: 0.4rem;
      }
    }

    .info {
      margin-top: 0.16rem;
      font-size: 0.293333rem;
      color: #999;
    }
  }
}

.common-hd {
  height: 1rem;
  line-height: 1rem;
  font-size: 0.373333rem;
  font-family: "Microsoft YaHei";
  font-weight: 700;
  border-bottom: 1px solid #e4e4e4;
}

// 薪资发布部分
.publish {
  margin-top: 0.2rem;
  padding: 0 0 0.56rem 0.346667rem;
  background-color: #fff;

  .publish-bd {
    padding: 0.186667rem 0.4rem 0 0;
    display: flex;
    justify-content: space-between;
    .left-pub {
      width: 4.666667rem;
      height: 5.666667rem;
      // background-color: pink;
    }
    .right-pub {
      width: 4.4rem;
      height: 5.666667rem;
      // background-color: pink;

      table {
        width: 100%;
        border-spacing: 0;
        border-collapse: collapse;
        tr {
          &:nth-child(1) {
            width: 100%;
            height: 0.68rem;
            line-height: 0.68rem;
            text-align: center;
            font-size: 0.306667rem;
            background-color: #f3f3f3;
            td {
              &:nth-child(1) {
                width: 1.333333rem;
              }
              &:nth-child(2) {
                width: 1.906667rem;
              }
              &:nth-child(3) {
                width: 1.173333rem;
              }
            }
          }

          &:nth-child(n + 2) {
            width: 100%;
            height: 0.773333rem;
            line-height: 0.68rem;
            // -webkit-border-bottom: 1px solid #000;
            border-bottom: 1px solid #dcdcdc;
            td {
              font-size: 0.266667rem;
              color: #868686;
              &:nth-child(1) {
                width: 1.333333rem;
                padding-left: 0.066667rem;
              }
              &:nth-child(2) {
                width: 1.906667rem;

                [class^="pro"] {
                  display: inline-block;
                  width: 0.066667rem;
                  height: 0.293333rem;
                  border-radius: 0.026667rem;
                  background-color: #ff8b02;
                }

                .pro2 {
                  width: 0.146667rem;
                  height: 0.293333rem;
                  border-radius: 0.026667rem;
                  background-color: #08a687;
                }

                .pro3 {
                  width: 0.32rem;
                  height: 0.293333rem;
                  border-radius: 0.026667rem;
                  background-color: #427cff;
                }

                .pro4 {
                  width: 0.453333rem;
                  height: 0.293333rem;
                  border-radius: 0.026667rem;
                  background-color: #36c38f;
                }

                .pro5 {
                  width: 0.746667rem;
                  height: 0.293333rem;
                  border-radius: 0.026667rem;
                  background-color: #ec5762;
                }

                .pro6 {
                  width: 1.16rem;
                  height: 0.293333rem;
                  border-radius: 0.026667rem;
                  background-color: #52c4f0;
                }

                .pro7 {
                  width: 0.746667rem;
                  height: 0.293333rem;
                  border-radius: 0.026667rem;
                  background-color: #febe00;
                }
              }
              &:nth-child(3) {
                width: 1.173333rem;
                text-align: center;
              }
            }
          }

          &:last-child {
            border: 0;
          }
        }
      }
    }
  }
}

// 各地区薪资
.area {
  margin-top: 0.2rem;
  padding: 0 0 0 0.346667rem;
  background-color: #fff;

  .area-bd {
    padding: 0.6rem 0.333333rem;

    table {
      width: 100%;
      border-spacing: 0;
      border-collapse: collapse;
      tr {
        height: 1.066667rem;
        line-height: 1.066667rem;
        td {
          &:nth-child(1) {
            width: 0.733333rem;
            height: 1.066667rem;
            line-height: 1.066667rem;
            .img-ico {
              width: 0.613333rem;
              height: 0.6rem;
              img {
                width: 100%;
                height: 100%;
                vertical-align: top;
              }
            }
          }
          &:nth-child(2) {
            width: 1rem;
            height: 1.066667rem;
            font-size: 0.373333rem;
            color: #333333;
            font-weight: 700;
          }
          &:nth-child(3) {
            width: 6.133333rem;
            height: 1.066667rem;
            line-height: 1.066667rem;
            padding: 0 0.133333rem;
            img {
              width: 100%;
              height: 0.013333rem;
              vertical-align: middle;
            }
          }

          &:nth-child(4) {
            width: 1.4rem;
            height: 1.066667rem;
            font-size: 0.373333rem;
            font-weight: 700;
            color: #333333;
          }
        }
      }
    }
  }
}
